<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>首页</title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/common.min.css">
    <link rel="stylesheet" href="./css/index.min.css">
</head>

<body>
    <!-- ↓ 底部导航 -->
    <nav class="mui-bar mui-bar-tab">
        <a id="defaultTab" class="mui-tab-item mui-active" href="home.html">
            <span class="mui-icon mui-icon-home"></span>
            <span class="mui-tab-label">首页</span>
        </a>
        <a class="mui-tab-item" href="">
            <span class="mui-icon mui-icon-classify"></span>
            <span class="mui-tab-label">分类</span>
        </a>
        <a class="mui-tab-item" href="">
            <span class="mui-icon mui-icon-order"></span>
            <span class="mui-tab-label">订单</span>
        </a>
        <a class="mui-tab-item" href="">
            <span class="mui-icon mui-icon-personal"></span>
            <span class="mui-tab-label">我的</span>
        </a>
    </nav>
    <!-- 底部导航 ↑ -->

    <script src="./js/flexible.js"></script>


    <script>
        mui.init({
            subpages: [{
                url: 'home.html',  //子页面HTML地址，支持本地地址和网络地址
                id: 'home.html',    //子页面标志
                styles: {
                    top: '0px',  //子页面顶部位置
                    bottom: '61px',    //子页面底部位置
                    //     width: subpage - width, //子页面宽度，默认为100%
                    //     height: subpage - height,   //子页面高度，默认为100%

                },
                extras: {}//额外扩展参数
            }]
        });
        // //mui初始化
        // mui.init();
        // var subpages = ['home.html'];
        // // var subpage_style = {
        // //     top: '0px',
        // //     bottom: '2.613333rem'
        // // };

        // var aniShow = {};

        // //创建子页面，首个选项卡页面显示，其它均隐藏；
        // mui.plusReady(function () {
        //     var self = plus.webview.currentWebview();
        //     for (var i = 0; i < 4; i++) {
        //         var temp = {};
        //         var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
        //         if (i > 0) {
        //             sub.hide();
        //         } else {
        //             temp[subpages[i]] = "true";
        //             mui.extend(aniShow, temp);
        //         }
        //         self.append(sub);
        //     }
        // });
        // //当前激活选项
        // var activeTab = subpages[0];
        // var title = document.getElementById("title");
        // //选项卡点击事件
        // mui('.mui-bar-tab').on('tap', 'a', function (e) {
        //     var targetTab = this.getAttribute('href');
        //     if (targetTab == activeTab) {
        //         return;
        //     }
        //     //更换标题
        //     title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
        //     //显示目标选项卡
        //     //若为iOS平台或非首次显示，则直接显示
        //     if (mui.os.ios || aniShow[targetTab]) {
        //         plus.webview.show(targetTab);
        //     } else {
        //         //否则，使用fade-in动画，且保存变量
        //         var temp = {};
        //         temp[targetTab] = "true";
        //         mui.extend(aniShow, temp);
        //         plus.webview.show(targetTab, "fade-in", 300);
        //     }
        //     //隐藏当前;
        //     plus.webview.hide(activeTab);
        //     //更改当前活跃的选项卡
        //     activeTab = targetTab;
        // });
        // //自定义事件，模拟点击“首页选项卡”
        // document.addEventListener('gohome', function () {
        //     var defaultTab = document.getElementById("defaultTab");
        //     //模拟首页点击
        //     mui.trigger(defaultTab, 'tap');
        //     //切换选项卡高亮
        //     var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
        //     if (defaultTab !== current) {
        //         current.classList.remove('mui-active');
        //         defaultTab.classList.add('mui-active');
        //     }
        // });
    </script>
</body>

</html>